<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="销售项目统计" name="1">
        <template #title>
          <span style="font-weight: bold; font-size: large;">销售项目统计</span>
        </template>
        <div>
          <el-row>
         <el-col :span="8">
          <div>
            <h2 class="title" style="font-weight: bold; font-size: large; text-align: center;">销售项目统计:</h2>
        </div>
          <div id="Xchart" style="width: 100%; height: 200%;"></div>
          </el-col>
          <el-col :span="16">
            <div>
          <h2 class="title" style="font-weight: bold; font-size: large; text-align: center;"><strong>本年度定点失败销售项目清单展示</strong></h2>
        </div>
        <div>
            <el-table
            :data="XsProjectList"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            :default-sort="{ prop: 'project_id', order: 'descending' }"
            max-height="250"
            @row-click="handleRowClick"
            :header-cell-style="{'background': '#0077a1 !important','color': '#ffffff'}"
            >
            <el-table-column label="序号" type="index"  width="80" fixed="left"/>
            <el-table-column prop="project_id" label="项目编码" width="180" fixed sortable />
            <el-table-column prop="project_name" label="项目名称" width="180" fixed/>
            <el-table-column prop="user_name" label="项目经理" width="180" />
            <el-table-column prop="name" label="项目状态" width="180" sortable />
            <el-table-column prop="project_class" label="项目性质" width="180" />
            <el-table-column prop="customer_info" label="主机厂/车型" width="180" />
            <el-table-column prop="important_or_not" label="是否重要项目" width="180" />
            <el-table-column prop="newengry_or_not" label="是否新能源" width="180" />
            <el-table-column prop="product_power" label="功率" width="180" />
            <el-table-column prop="main_material" label="主材料" width="180" />
            <el-table-column prop="project_area" label="项目区域" width="180" />
            <el-table-column prop="product_type" label="产品类型" width="180" />
            <!-- <el-table-column prop="date" label="QTR-1" width="180" />
            <el-table-column prop="address" label="QTR-2" width="180"/> -->
        </el-table>
        </div>
          </el-col>
          </el-row>
          <!-- <el-card> -->
          <!-- </el-card> -->
        </div>
      </el-collapse-item>
      <el-collapse-item title="开发项目统计" name="2">
        <template #title>
          <span style="font-weight: bold;font-size: large;">开发项目统计</span>
        </template>
        <div>
          <el-card>
            <div>
            <h2 class="title" style="font-weight: bold; font-size: large; text-align: center;">开发项目统计:</h2>
        </div>
           <div id="Devchart" style="width: 100%; height: 350px;"></div>
          </el-card>
        </div>
        <div>
          <h2 class="title" style="font-weight: bold; font-size: large; text-align: center;">当前延期的开发项目清单</h2>
        </div>
        <div>
            <el-table
            :data="DevProjectList"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            :default-sort="{ prop: 'project_id', order: 'descending' }"
            max-height="250"
            @row-click="handleRowClick"
            :header-cell-style="{'background': '#0077a1 !important','color': '#ffffff'}"
            >
            <el-table-column label="序号" type="index"  width="80" fixed="left"/>
            <el-table-column prop="project_id" label="项目编码" width="180" fixed sortable />
            <el-table-column prop="project_name" label="项目名称" width="180" fixed/>
            <el-table-column prop="user_name" label="项目经理" width="180" />
            <el-table-column prop="name" label="项目状态" width="180" sortable />
            <el-table-column prop="project_class" label="项目性质" width="180" />
            <el-table-column prop="customer_info" label="主机厂/车型" width="180" />
            <el-table-column prop="important_or_not" label="是否重要项目" width="180" />
            <el-table-column prop="newengry_or_not" label="是否新能源" width="180" />
            <el-table-column prop="name" label="客户关键节点" width="180" />
            <el-table-column prop="name" label="客户关键市场信息" width="180" />
            <el-table-column prop="product_power" label="功率" width="180" />
            <el-table-column prop="main_material" label="主材料" width="180" />
            <el-table-column prop="project_area" label="项目区域" width="180" />
            <el-table-column prop="product_type" label="产品类型" width="180" />
            <!-- <el-table-column prop="address" label="QTR-3" width="180"/>
            <el-table-column prop="address" label="QTR-4" width="180"/>
            <el-table-column prop="address" label="QTR-5" width="180"/>
            <el-table-column prop="address" label="QTR-6" width="180"/>
            <el-table-column prop="address" label="QTR-7" width="180"/>
            <el-table-column prop="address" label="QTR-8" width="180"/> -->
        </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item title="新增项目统计" name="3">
        <template #title>
          <span style="font-weight: bold;font-size: large;">新增项目统计</span>
        </template>
        <div>
          <el-row :gutter="20">
        <el-col :span="12"><div class="grid-content" />
          <el-card>
            <!-- <el-select v-model="xstypevalue" class="m-2" placeholder="Select" size="small" @change="loadewXSChartData">
            <el-option
              v-for="item in typeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
          <p style="font-weight: bold; font-size: large; text-align: center;">销售项目月度新增统计</p>
           <div id="Xschart" style="width: 100%; height: 300px; text-align: center;"></div>
          </el-card>
        </el-col>
        <el-col :span="12"><div class="grid-content" />
          <el-card>
            <el-select v-model="devtypevalue" class="m-2" placeholder="Select" size="small" @change="loadDevChartData">
            <el-option
              v-for="item in devtypeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          开发项目月度新增统计
           <div id="Newchart" style="width: 100%; height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { BASE_URL } from '@/api/project'
const activeNames = ref(['1'])
activeNames.value = ['1', '2', '3']
// const xstypevalue = ref('0')
const devtypevalue = ref('0')
const router = useRouter()
const handleRowClick = (row) => {
  router.push({ path: '/detail', query: { id: row.project_id } })
}
// const typeoptions = [
//   {
//     value: '0',
//     label: '全部'
//   },
//   {
//     value: '1',
//     label: '全新开发项目'
//   },
//   {
//     value: '2',
//     label: '衍生开发项目'
//   },
//   {
//     value: '3',
//     label: '软模试样项目'
//   },
//   {
//     value: '4',
//     label: '备模试样项目'
//   },
//   {
//     value: '5',
//     label: '储备项目'
//   }
// ]
const devtypeoptions = [
  {
    value: '0',
    label: '全部'
  },
  {
    value: '1',
    label: '全新开发项目'
  },
  {
    value: '2',
    label: '衍生开发项目'
  },
  {
    value: '3',
    label: '软模试样项目'
  },
  {
    value: '4',
    label: '备模试样项目'
  },
  {
    value: '5',
    label: '储备项目'
  }
]
const handleChange = (val) => {
  console.log(val)
}

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return 'success-row'
}
// const XSchart = ref(null)
const XsProjectList = ref([])
const DevProjectList = ref([])
const getprojectList = async (url, targetList) => {
  try {
    const response = await axios.get(url)
    targetList.value = response.data
  } catch (error) {
    console.error(error)
  }
}
const NewXSchartData = ref([])
const NewDevcharData = ref([])
let XsChart = null
let NewChart = null
const xstData = ref([])
const dstData = ref([])
function renderDChart () {
  const DevchartDom = document.getElementById('Devchart')
  const DevChart = echarts.init(DevchartDom)
  const options = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '2%',
      left: 'right'
    },
    dataset: {
      source: dstData.value
    },
    title: [
      {
        subtext: '全新开发项目',
        left: '8%',
        top: '65%'
      },
      {
        subtext: '衍生开发项目',
        left: '28%',
        top: '65%'
      },
      {
        subtext: '软模试样项目',
        left: '48%',
        top: '65%'
      },
      {
        subtext: '备模试样项目',
        left: '68%',
        top: '65%'
      },
      {
        subtext: '储备项目',
        left: '88.5%',
        top: '65%'
      }
    ],
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['10%', '62%'],
        encode: {
          itemName: 'project',
          value: '全新开发项目'
        }
      },
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['30%', '62%'],
        encode: {
          itemName: 'project',
          value: '衍生开发项目'
        }
      },
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['50%', '62%'],
        encode: {
          itemName: 'project',
          value: '软模试样项目'
        }
      },
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['70%', '62%'],
        encode: {
          itemName: 'project',
          value: '备模试样项目'
        }
      },
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['90%', '62%'],
        encode: {
          itemName: 'project',
          value: '储备项目'
        }
      }
    ]
  }
  DevChart.setOption(options)
}
function renderXChart () {
  const XchartDom = document.getElementById('Xchart')
  const Xchart = echarts.init(XchartDom)
  const Xoption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      name: '销售项目',
      type: 'pie',
      radius: '80%',
      data: xstData.value
    }]
  }
  Xchart.setOption(Xoption)
}
function renderNewXSChart () {
  // 使用 ECharts 配置项渲染柱形图
  const options = {
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: NewXSchartData.value,
      type: 'bar',
      barWidth: 20 // 设置柱形的宽度
    }]
  }
  XsChart.setOption(options)
}
function renderNewDevChart () {
  // 使用 ECharts 配置项渲染柱形图
  const options = {
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: NewDevcharData.value,
      type: 'bar',
      barWidth: 20 // 设置柱形的宽度
    }]
  }
  NewChart.setOption(options)
}
async function loadNewXSData () {
  // 异步请求或其他方式加载默认数据
  try {
    const response = await axios.get(BASE_URL + '/getMonthStatistics', {
      params: {
        // type全部为0  1为销售
        className: 0,
        type: 0
      }
    })
    const data = response.data
    console.log(data)
    // 更新柱形图数据和下拉框选项
    NewXSchartData.value = data
    // typeoptions.value = data.dropdownOptions

    // 渲染柱形图
    renderNewXSChart()
  } catch (error) {
    console.error(error)
  }
}
// 开发项目统计渲染
async function loadDevprojectSt () {
  try {
    const response = await axios.get(BASE_URL + '/getProjectStatistics', {
      params: {
        type: 1
      }
    })
    const data = response.data
    console.log(data)

    dstData.value = data

    // 渲染
    renderDChart()
  } catch (error) {
    console.error(error)
  }
}
// 销售项目统计
async function loadXsprojectSt () {
  try {
    const response = await axios.get(BASE_URL + '/getXsProjectStatistic', {
      params: {
        type: 0
      }
    })
    const data = response.data
    console.log(data)

    xstData.value = data

    // 渲染
    renderXChart()
  } catch (error) {
    console.error(error)
  }
}
// 每月新增统计
async function loadNewDevData () {
  // 异步请求或其他方式加载默认数据
  try {
    const response = await axios.get(BASE_URL + '/getMonthStatistics', {
      params: {
        // 全部为0  1为销售
        className: 0,
        type: 1
      }
    })
    const data = response.data
    console.log(data)
    // 更新柱形图数据和下拉框选项
    NewDevcharData.value = data
    devtypeoptions.value = data.dropdownOptions

    // 渲染柱形图
    renderNewDevChart()
  } catch (error) {
    console.error(error)
  }
}
// async function loadewXSChartData () {
//   // 根据选中的下拉框选项加载对应的数据
//   const selectedValue = encodeURIComponent(xstypevalue.value) // 获取选中的值
//   console.log(xstypevalue.value)
//   // const url = `your-api-url?className=${selectedValue}` // 构建带参数的请求链接
//   // const response = await fetch(url)
//   // const data = await response.json()
//   try {
//     const response = await axios.get(BASE_URL + '/getMonthStatistics', {
//       params: {
//         className: selectedValue,
//         type: 0
//       }
//     })
//     const data = response.data
//     console.log(data)
//     // 更新柱形图数据
//     NewXSchartData.value = data

//     // 渲染柱形图
//     renderNewXSChart()
//   } catch (error) {
//     console.error(error)
//   }
// }
async function loadDevChartData () {
  // 根据选中的下拉框选项加载对应的数据
  const selectedValue = encodeURIComponent(devtypevalue.value) // 获取选中的值
  console.log(devtypevalue.value)
  // const url = `your-api-url?className=${selectedValue}` // 构建带参数的请求链接
  // const response = await fetch(url)
  // const data = await response.json()
  try {
    const response = await axios.get(BASE_URL + '/getMonthStatistics', {
      params: {
        className: selectedValue,
        type: 0
      }
    })
    const data = response.data
    console.log(data)

    NewDevcharData.value = data

    renderNewDevChart()
  } catch (error) {
    console.error(error)
  }
}

onMounted(async () => {
  // const chart = echarts.init(chartRef.value)
  const NewchartDom = document.getElementById('Newchart')
  XsChart = echarts.init(document.getElementById('Xschart'))
  NewChart = echarts.init(NewchartDom)

  // const option = {
  //   xAxis: {
  //     type: 'category',
  //     data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
  //   },
  //   yAxis: {
  //     type: 'value'
  //   },
  //   series: [
  //     {
  //       data: [3, 2, 15, 8, 7, 1, 0, 2, 3, 5, 1, 2],
  //       type: 'bar',
  //       barWidth: 20 // 设置柱形的宽度
  //     }
  //   ]
  // }
  // option && XsChart.setOption(option)

  loadNewXSData()
  loadNewDevData()
  loadXsprojectSt()
  loadDevprojectSt()
  // option && NewChart.setOption(option)
  // chart.setOption(options)

  getprojectList(BASE_URL + '/getProjectLateList?type=0', XsProjectLsit)
  getprojectList(BASE_URL + '/getProjectLateList?type=1', DevProjectList)
})
</script>

<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

</style>
